<template>
  <div class="map-list-wrapper">
    <MapboxMap
      :map-id="mapId"
      @after-map-loaded="afterMapLoaded"
      @before-map-destroyed="beforeMapDestroyed"
    />
    <MapListLeft v-if="showList" :parkId="parkId" @detail="handleDetail" />
    <MapListDetail v-else :pkid="currentPkid" @close="handleClose" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import MapListLeft from './mapListLeft.vue'
import MapListDetail from './mapListDetail.vue'
import mapboxgl from 'mapbox-gl'
import { nanoid } from 'nanoid'
import MapboxMap from '@/components/mapbox-map.vue'
let _map
const mapId = nanoid()

const afterMapLoaded = async (id, map) => {
  console.log('afterMapLoaded:', id, map)
  _map = map
}

const beforeMapDestroyed = (id, map) => {
  console.log('beforeMapDestroyed:', id, map)
}
const props = defineProps({
  parkId: {
    type: String,
  },
})

const showList = ref(true)
const currentPkid = ref('')
const handleDetail = (pkid) => {
  showList.value = false
  currentPkid.value = pkid
}
const handleClose = () => {
  showList.value = true
  currentPkid.value = ''
}
</script>
<style lang="scss" scoped>
.map-list-wrapper {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 0px 10px 0px rgba(72, 121, 238, 0.1);
  position: relative;
  .mapbox-map {
    width: 100%;
    height: 100%;
    border-radius: 0 0 10px 10px;
  }
}
</style>
